<template>
    <el-dialog
      :model-value="dialogFormVisible"
      :destroy-on-close="true"
      title="商户费用配置"
      width="780px"
      @close="
        () => {
          cardType = '';
          emits('closeDialog');
        }
      "
    >
      <el-form
        ref="dialogFormRef"
        :model="dialogForm"
        :label-width="formLabelWidth"
        :rules="rules"
      >
        <el-form-item label="商户" prop="merchant_id">
          <el-select
            clearable
            v-model="dialogForm.merchant_id"
            placeholder="商户"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="item in payMerchantList"
              :key="item.value"
              :label="item.name + '-' + item.merchant_id"
              :value="item.merchant_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开卡费率" prop="card_rate">
          <el-input v-model="dialogForm.card_rate" type="number"><template #append>%</template></el-input>
        </el-form-item>
        <el-form-item label="开卡固定费用(单笔)" prop="card_rate">
          <el-input v-model="dialogForm.card_fee" type="number" />
        </el-form-item>
        <el-form-item label="卡充值费率" prop="in_rate">
          <el-input v-model="dialogForm.in_rate" type="number"><template #append>%</template></el-input>
        </el-form-item>
        <el-form-item label="卡充值费用(单笔)" prop="in_fee">
          <el-input v-model="dialogForm.in_fee" type="number" />
        </el-form-item>
        <el-form-item label="卡提现费率" prop="out_rate">
          <el-input v-model="dialogForm.out_rate" type="number"><template #append>%</template></el-input>
        </el-form-item>
        <el-form-item label="卡提现费用(单笔)" prop="out_rate">
          <el-input v-model="dialogForm.out_fee" type="number" />
        </el-form-item>
        <el-form-item label="退款费率" prop="refund_fee_rate">
          <el-input v-model="dialogForm.refund_fee_rate" type="number"><template #append>%</template></el-input>
        </el-form-item>
        <el-form-item label="退款固定费用(单笔)" prop="refund_fee">
          <el-input v-model="dialogForm.refund_fee" type="number" />
        </el-form-item>
        <el-form-item label="撤销固定费用(单笔)" prop="reversal_fee">
          <el-input v-model="dialogForm.reversal_fee" type="number" />
        </el-form-item>
        <el-form-item label="争议固定费用(单笔)" prop="dispute_fee">
          <el-input v-model="dialogForm.dispute_fee" type="number" />
        </el-form-item>
        <el-form-item label="拒付费率" prop="refuse_fee_rate">
          <el-input v-model="dialogForm.refuse_fee_rate" type="number"><template #append>%</template></el-input>
        </el-form-item>
        <el-form-item label="拒付最低费用" prop="refuse_min_fee">
          <el-input v-model="dialogForm.refuse_min_fee" type="number" />
        </el-form-item>
        <el-collapse>
          <el-collapse-item title="成本费用项配置" name="1">
        <el-form-item label="开卡费率" prop="card_rate">
          <el-input v-model="dialogForm.cost_card_rate" type="number">
              <template #prepend>成本</template>
              <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="开卡固定费用(单笔)" prop="cost_card_fee">
          <el-input v-model="dialogForm.cost_card_fee" type="number">
              <template #prepend>成本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="卡充值费率" prop="cost_in_rate">
          <el-input v-model="dialogForm.cost_in_rate" type="number">
            <template #prepend>成本</template>
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="卡充值费用(单笔)" prop="cost_in_fee">
          <el-input v-model="dialogForm.cost_in_fee" type="number">
            <template #prepend>成本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="卡提现费率" prop="cost_out_rate">
          <el-input v-model="dialogForm.cost_out_rate" type="number">
            <template #prepend>成本</template>
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="卡提现费用(单笔)" prop="cost_out_fee">
          <el-input v-model="dialogForm.cost_out_fee" type="number">
            <template #prepend>成本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="退款费率" prop="cost_refund_fee_rate">
          <el-input v-model="dialogForm.cost_refund_fee_rate" type="number">
              <template #prepend>成本</template>
              <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="退款固定费用(单笔)" prop="cost_refund_fee">
          <el-input v-model="dialogForm.cost_refund_fee" type="number">
              <template #prepend>成本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="撤销固定费用(单笔)" prop="cost_reversal_fee">
          <el-input v-model="dialogForm.cost_reversal_fee" type="number">
              <template #prepend>成本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="争议固定费用(单笔)" prop="cost_dispute_fee">
          <el-input v-model="dialogForm.cost_dispute_fee" type="number">
              <template #prepend>成本</template>
          </el-input>
        </el-form-item>
        <el-form-item label="拒付费率" prop="cost_refuse_fee_rate">
          <el-input v-model="dialogForm.cost_refuse_fee_rate" type="number">
              <template #prepend>成本</template>
              <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="拒付最低费用" prop="cost_refuse_min_fee">
          <el-input v-model="dialogForm.cost_refuse_min_fee" type="number">
              <template #prepend>成本</template>
          </el-input>
        </el-form-item>
      </el-collapse-item>
      </el-collapse>
      <div>&nbsp;</div>
        <el-form-item label="备注" prop="description">
          <el-input
            v-model="dialogForm.description"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button
            type="primary"
            @click="submit(dialogForm)"
            :loading="btnLoading"
          >
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup>
  import { ref, computed } from "vue";
  const dialogFormRef = ref(null);
  import { GlobalStore } from "@/store";
  
  const globalStore = GlobalStore();
  const payMerchantList = computed(() => globalStore.payMerchantList);
  
  import { cardsProductApi } from "@/api/payServerse/cards";
  
  defineProps({
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    dialogForm: {
      type: Object,
      default: {
        id: "",
        merchant_id: "",
        issuer_channel: "",
        card_rate: 0,
        card_fee: 0,
        in_rate: 0,
        in_fee: 0,
        out_rate: 0,
        out_fee: 0,
        refund_fee_rate: 0,
        refund_fee: 0,
        reversal_fee: 0,
        dispute_fee: 0,
        refuse_fee_rate: 0,
        refuse_min_fee: 0,
        cost_card_rate: 0,
        cost_card_fee: 0,
        cost_refund_fee_rate: 0,
        cost_refund_fee: 0,
        cost_reversal_fee: 0,
        cost_dispute_fee: 0,
        cost_refuse_fee_rate: 0,
        cost_refuse_min_fee: 0,
        description: "",
      },
    },
    btnLoading: {
      type: Boolean,
      default: false,
    },
    issueChannelData: { type: Object, default: [] },
    issueClientData: { type: Object, default: [] },
    cardConfigData: { type: Object, default: [] },
  });
  const emits = defineEmits([
    "closeDialog",
    "cancel",
    "submitForm",
    "cardTypeChange",
  ]);
  
  const formLabelWidth = "200px";
  // 校验
  const rules = {
    merchant_id: [{ required: true, message: "请输入选择商户", trigger: "blur" }],
  };
  
  const cardType = ref("");
  
  const cardTypeChange = (val) => {
    emits("cardTypeChange", val);
  };
  
  const cancel = () => {
    cardType.value = "";
    emits("cancel");
  };
  
  // 提交
  const submit = (dialogForm) => {
    dialogFormRef.value
      .validate()
      .then(async () => {
        try {
          const param = Object.assign({}, dialogForm);
          cardType.value = "";
          if (!param.product_id) {
            param.product_id = 0;
          }
          emits("submitForm", param);
        } catch (error) {
          return false;
        }
      })
      .catch((error) => {
        return false;
      });
  };

  </script>
  